<template>
  <div class="detailWrap">
    <!-- 头部横幅 -->
    <div class="topBanner">
      <img
        @click="goHome"
        src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp"
        alt=""
      />
      <div class="openApp">打开</div>
    </div>
    <!-- 内容图片信息 -->
    <div class="albumDes">
      <div class="albumsIntro">
        <div class="albumsAvatar">
          <img class="avatar" :src="albumImg" alt="" />
          <img
            class="decoration"
            src="https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/listen_pic_album@3x_d18f4f7.png"
            alt=""
          />
          <div class="playCount">
            <van-icon name="service-o" />
            {{ useFormatPlayCount(statCountInfo?.playCount) }}
          </div>
          <span class="vip" v-if="userInfo.isVip">vip</span>
        </div>
        <div class="albumInfo">
          <div class="albumTitle">{{ albumInfo?.title }}</div>
          <div class="albumUser">
            <img class="avatar" :src="avatar" alt="" />
            {{ userInfo.nickname }}
          </div>
          <div class="subscribe">
            已订阅{{ useFormatPlayCount(statCountInfo?.subscribeCount) }}人
          </div>
        </div>
      </div>

      <div class="albumsBackImg">
        <img :src="albumImg" alt="" />
      </div>
    </div>
    <!--  内容简介-->
    <div class="albumContentDes" :style="{ height }">
      <div
        v-if="albumRichInfo?.richIntro"
        v-html="albumRichInfo?.richIntro"
        class="content"
      ></div>
      <div v-else><van-empty description="赞无该作品的简介" /></div>
      <!-- 遮罩层 -->
      <div class="mask" :style="{ display }">
        <p class="dropBtn" @click="dropContent">
          <i class="iconfont icon-xiala1"></i>
        </p>
      </div>
    </div>

    <!-- 打开app，完整收听 -->
    <div class="openWrap">
      <div class="openApp">打开App，完整收听</div>
    </div>

    <!-- 节目 -->
    <div class="albumColumn">
      <div class="columnHeader flex">
        <strong>节目({{ totalColumn }})</strong>
        <em @click="columnSort"><van-icon name="sort" />切换顺序</em>
      </div>
      <div
        class="columnItem flex"
        v-for="(column, index) in trackDetailInfos"
        :key="column.id"
      >
        <strong @click="playStatus(column.trackInfo, index)">
          <van-icon
            v-if="!column.trackInfo.playing"
            name="play-circle-o"
            size="26px"
          />
          <van-icon v-else name="pause-circle-o" size="26px" />
        </strong>
        <p :style="currentIndex === index ? color : undefined">
          {{ column.trackInfo.title }}
        </p>
        <i
          @click="downLoadAsset(column.trackInfo.playPath)"
          class="iconfont icon-download"
        ></i>
        <audio
          v-if="column.trackInfo.playPath"
          controls
          class="audioPlay"
          :src="column.trackInfo.playPath"
          ref="audioRef"
          loop
        ></audio>
      </div>
      <!-- 加载更多 -->
      <div class="more" @click="useIsLogin">加载更多 <van-icon name="arrow-down" /></div>
    </div>
    <!-- 主播信息 -->

    <div class="anchorUser">
      <div class="userInfo">
        <AnchorInfo
          :anchorId="anchorId"
          :userInfo="userInfo"
          :anchorStatCountInfo="anchorStatCountInfo"
        ></AnchorInfo>
      </div>
      <div class="comment">
        <UserReviews v-if="albumId" :albumId="albumId"></UserReviews>
      </div>
    </div>

    <!-- 相似专辑 -->
    <div class="similarAlbums">
      <div class="title">相似专辑</div>
      <div class="albumsList flex">
        <scz-card
          v-for="album in albumDocs"
          :key="album.albumId"
          :albumItem="album"
        >
        </scz-card>
      </div>
      <div class="refresh">
        <span class="box" @click="refreshData"
          ><i class="iconfont icon-recycle"></i> 换一批</span
        >
      </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="guessYouLike">
      <LikeDetail></LikeDetail>
      <div class="more" @click="useIsLogin">
        <span style="vertical-align: middle"
          >查看更多
          <i class="iconfont icon-right-arrow" style="font-weight: 600"></i
        ></span>
      </div>
    </div>

    <!-- 购买听书和购买会员 -->
    <div class="buyBookOrVip flex">
      <div class="book" @click="toLogin">
        购买已更全集<span class="price">￥<i>468.8</i></span>
      </div>
      <div class="vip" @click="toLogin">6元开启会员 免费试听</div>
    </div>
    <!-- --------------底部版权------------------- -->
    <div class="footer">
      <img
        class="bigImg"
        src="https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png!magick=webp"
        alt=""
      />
      <img
        class="smallImg"
        src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp"
        alt=""
      />
      <p class="copyright">© 2014-2023喜马拉雅 版权所有</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  name: 'index',
});
</script>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import {
  reqGetAlbumsDetailHeader,
  reqGetAlbumsColumnInfo,
  reqGetAnchorUserInfo,
  reqGetSimilarAlbumInfo,
} from '@/api/scz-detail.ts';
import { ElMessage } from 'element-plus';
import { useFormatImgPath } from '@/mixin/formatImgPath';
import { useFormatPlayCount } from '@/mixin/playCount';
import { useIsLogin } from '@/mixin/isLogin';
const route = useRoute();
const router = useRouter();
// 获取详情的id
const albumId = ref(route.params.id);
//   固定id 38351179
//动态设置内容展示的高度
const height = ref('160px');
// 控制模态框的限时与隐藏
const display = ref('block');

//  存储头部详情的数据
const albumInfo = ref();
// 播放和订阅数据
const statCountInfo = ref();
// 内容区数据
const albumRichInfo = ref();

// 拼接新的图片地址
let albumImg = ref();

// 总栏目节目数量
const totalColumn = ref();
// 栏目排序关键
const sort = ref(true);
// 节目全部数据
const trackDetailInfos = ref([]);

// 用户的anchorid 用于获取主播相关信息
const anchorId = ref<number>();

// 存储主播信息
const userInfo = ref({});
// 主播订阅数
const anchorStatCountInfo = ref();
// 主播图片
const avatar = ref();

// 相似专辑的切换 page 与 row
const page = ref(1);
const row = ref(6);
const kw = ref('');
const totalAlbum = ref<number>();
const albumDocs = ref([]);

// 获取到音频的ref
const audioRef = ref();

const currentIndex = ref(-1);
//  字体颜色的变化
const color = ref();
// 控制是否播放的函数
function playStatus(column: any, index: number) {
  if(!audioRef.value) return
  if (currentIndex.value !== index) {
    trackDetailInfos.value.forEach((item: any) => {
      item.trackInfo.playing = false;
    });

    audioRef.value.forEach((item: any) => {
      item.pause();
      item.currentTime = 0;
    });
  }

  column.playing = !column.playing;

  currentIndex.value = index;

  if (column.playing) {
    audioRef.value[index].play();
    color.value = 'color:#f86442;';
  } else {
    audioRef.value[index].pause();
    color.value = 'color:#333;';
  }
}
// 使用a标签下载静态资源
function downLoadAsset(href: string) {
  if (!href) return;
  download(href);
}
function downloadMp3(filePath: string) {
  fetch(filePath)
    .then((res) => res.blob())
    .then((blob) => {
      const a = document.createElement('a');
      document.body.appendChild(a);
      a.style.display = 'none';
      const url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = 'ximalaya.m4a';
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    });
}

function download(href: string) {
  downloadMp3(href);
}

// 封装获取头部详情的内容函数
async function getAlbumsDetail(albumId: number) {
  try {
    const res = await reqGetAlbumsDetailHeader(Number(albumId));
    // console.log(res, '头部详情页');
    albumInfo.value = res.data.albumDetailInfo.albumInfo;

    statCountInfo.value = res.data.albumDetailInfo.statCountInfo;

    albumRichInfo.value = res.data.albumRichInfo;

    albumImg.value = useFormatImgPath(res.data.albumDetailInfo.albumInfo.cover);

    kw.value = res.data.albumDetailInfo.albumInfo.title;

    anchorId.value = res.data.albumDetailInfo.albumInfo.anchorId;

    getSimilarAlbumInfo();

    getAnchorUserInfo();
  } catch (error) {
    console.log(error);
  }
}

// 获取节目的数据函数
async function getAlbumsColumnInfo(albumId: number) {
  try {
    const res = await reqGetAlbumsColumnInfo(Number(albumId), sort.value);
    // console.log(res, '节目');
    totalColumn.value = res.data.totalCount;
    trackDetailInfos.value = res.data.trackDetailInfos.map((item: any) => {
      item.trackInfo.playing = false;
      return item;
    });
  } catch (error) {
    console.log(error);
  }
}
// 栏目排序
function columnSort() {
  sort.value = !sort.value;
  getAlbumsColumnInfo(Number(albumId.value));
}

// 获取主播用户信息
async function getAnchorUserInfo() {
  try {
    const res = await reqGetAnchorUserInfo(anchorId.value!);
    // console.log(res, '主播信息');
    userInfo.value = res.data.userInfo;
    anchorStatCountInfo.value = res.data.statCountInfo;
    avatar.value = useFormatImgPath(res.data.userInfo.logo);
  } catch (error) {
    console.log(error);
  }
}

// 获取相似专辑的数据
async function getSimilarAlbumInfo() {
  try {
    const res = await reqGetSimilarAlbumInfo(kw.value, page.value, row.value);
    // console.log(res, '相似专辑');
    albumDocs.value = res.data.album?.docs;
    totalAlbum.value = res.data.album?.total;
    page.value = randomPage();
  } catch (error) {
    console.log(error);
  }
}

// 生成随机的page值获取随机数据
function randomPage() {
  return Math.floor(Math.random() * 10);
}
// 刷新获取新的相似专辑数据
function refreshData() {
  page.value = randomPage();
  getSimilarAlbumInfo();
}
// 再页面挂载的时候获取详情数据
watch(
  () => route.params.id,
  (newValue) => {
    albumId.value = newValue;
    getAlbumsDetail(Number(newValue));
    getAlbumsColumnInfo(Number(newValue));
  },
  {
    immediate: true,
  }
);

// 展示文本内容区
function dropContent() {
  height.value = 'auto';
  display.value = 'none';
}

// 回到首页
function goHome() {
  router.push('/home');
}

// 点击购买全集和开启会员
function toLogin() {
  if (localStorage.getItem('token')) {
    ElMessage.success('购买成功');
  } else {
    ElMessage({
      message: 'Congrats, this is a success message.',
      type: 'success',
    });
    router.push({
      path: '/home',
    });
  }
}
</script>

<style scoped lang="less">
.detailWrap {
  position: relative;
  em,
  strong,
  i {
    font-weight: normal;
    font-style: normal;
  }
  p {
    margin: 0;
  }

  // 顶部logo
  .topBanner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 8px;
    padding-top: 15px;
    height: 58px;
    width: 100%;
    background-color: #4c4d4f;
    img {
      width: 102px;
      height: 36px;
    }
    .openApp {
      height: 29px;
      width: 61px;
      line-height: 29px;
      text-align: center;
      font-size: 14px;
      background-color: #f86442;
      color: #fff;
      border-radius: 15px;
    }
  }
  //头部详情内容
  .albumDes {
    position: relative;
    width: 100%;
    height: 168px;
    overflow: hidden;
    .albumsIntro {
      display: flex;
      justify-content: space-between;
      padding: 30px 20px 20px;
      width: 100%;
      height: 168px;
      box-sizing: border-box;
      //   background-color: violet;
      .albumsAvatar {
        position: relative;
        width: 95px;
        height: 95px;
        overflow: hidden;
        border-radius: 5px;

        .avatar {
          width: 100%;
          height: 100%;
        }
        .decoration {
          position: absolute;
          top: 0;
          right: -24px;
          height: 100%;
          width: 24px;
        }
        .playCount {
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 4px 10px 4px 14px;
          width: 100%;
          height: 26px;
          box-sizing: border-box;
          font-size: 12px;
          font-weight: 600;
          text-align: right;
          color: #fff;
        }
        .vip {
          padding-left: 4px;
          position: absolute;
          top: 0;
          left: 0;
          width: 32px;
          height: 15px;
          line-height: 12px;
          box-sizing: border-box;
          font-size: 14px;
          vertical-align: top;
          border-radius: 0px 0px 15px 0;
          background-image: linear-gradient(-45deg, #dadada 1%, #cd9461 100%);
          color: #fff;
        }
      }
      .albumInfo {
        width: 215px;
        font-size: 12px;
        color: #fff;
        .albumTitle {
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          font-size: 17px;
        }
        .albumUser {
          position: relative;
          padding: 10px 0;
          color: rgba(255, 255, 255, 0.81);
          border-bottom: 1px solid #9e9e9e;
          .avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            vertical-align: middle;
          }
        }

        .subscribe {
          padding-top: 10px;
        }
      }
      .albumBackImg {
        width: 100%;
      }
    }
    .albumsBackImg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 336px;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: blur(20px);
      }

      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(22, 22, 22, 0.4);
      }
    }
  }
  //   内容简介
  .albumContentDes {
    position: relative;
    padding: 35px 15px 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.8);
    // p {
    //   margin: 0;
    // }
    // img {
    //   width: 100%;
    // }
    .content {
      width: 100%;
      :deep(img) {
        width: 100%;
      }
    }

    .mask {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 150px;
      background: linear-gradient(to bottom, transparent 10%, #fff 100%);
      .dropBtn {
        width: 100%;
        height: 24px;
        position: absolute;
        bottom: 10%;
        text-align: center;
        color: red;
        i {
          font-size: 24px;
          vertical-align: bottom;
        }
      }
    }
  }
  //   打开App
  .openWrap {
    margin-top: 20px;
    width: 100%;
    height: 41px;
    .openApp {
      margin: auto;
      height: 41px;
      width: 250px;
      font-size: 15px;
      line-height: 41px;
      text-align: center;
      border-radius: 22px;
      box-shadow: 0 0 8px #dcdcdc;
      background: linear-gradient(to right, #fb8f76, #f96745);
      color: #fff;

      animation-name: animationScale;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      //   animation-direction: alternate;
    }
    @keyframes animationScale {
      0% {
        transform: scale(0.92);
      }
      50% {
        transform: scale(1);
      }
      100% {
        transform: scale(0.92);
      }
    }
  }
  //   栏目头部

  .albumColumn {
    padding: 15px 15px 0;
    .columnHeader {
      height: 25px;
      justify-content: space-between;
      align-items: center;
      strong {
        font-size: 18px;
        font-weight: 600;
      }
      em {
        font-size: 14px;
        color: #999;
      }
    }
  }

  //   单项栏目
  .columnItem {
    position: relative;
    padding: 12px 0;
    font-size: 16px;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    strong {
      height: 26px;
      width: 26px;
      line-height: 38px;
      color: #999;
    }
    p {
      width: 266px;
      line-height: 26px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #333;
    }
    i {
      margin-right: 10px;
      align-self: center;
      font-size: 20px;
      color: #999;
    }
    .audioPlay {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: -1;
    }
  }
  //   查看更多
  .more {
    box-sizing: border-box;
    padding: 17px 0;
    height: 58px;
    text-align: center;
    font-size: 15px;
    color: #f86442;
    font-weight: 600;
  }
  // 主播信息
  .anchorUser {
    padding: 15px;
    .comment {
      margin-top: 20px;
    }
  }
  //   相视专辑
  .similarAlbums {
    padding: 15px 15px 0px 15px;
    .title {
      padding-bottom: 10px;
      font-size: 18px;
      font-weight: 600;
    }
    .albumsList {
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .refresh {
      font-size: 12px;
      color: #fff;
      text-align: center;
      .box {
        margin-top: 12px;
        display: inline-block;
        height: 31px;
        width: 72px;
        line-height: 31px;
        text-align: center;
        box-sizing: border-box;
        background: #f24821;
        border-radius: 15px;
        i {
          vertical-align: middle;
        }
      }
    }
  }
  //   购买听书和开会员
  .buyBookOrVip {
    position: fixed;
    bottom: -1px;
    height: 60px;
    width: 100%;
    z-index: 999;
    background-color: violet;
    .book {
      background: #fff;
      font-size: 14px;
      line-height: 60px;
      text-align: center;
      flex: 1;
      color: #333;
      .price {
        color: #f86442;
        i {
          font-size: 18px;
          font-weight: 600px;
        }
      }
    }
    .vip {
      font-size: 15px;
      flex: 1;
      line-height: 60px;
      text-align: center;
      color: #9b7b55;
      background-image: linear-gradient(90deg, #f6dec8, #e6b589);
    }
  }
  // 猜你喜欢
  .guessYouLike {
    padding: 15px;
  }
  //   底部版权
  .footer {
    position: relative;
    height: 180px;
    width: 100%;
    font-size: 12px;
    text-align: center;
    color: #808080;

    .bigImg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      height: 180px;
      width: 100%;
    }
    .smallImg {
      margin-top: 34px;
      width: 102px;
      height: 36px;
    }
  }
}
</style>
